<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>节点关系</title>
        <style>
            .wrapper, 
            .target { border: 1px solid blue ; margin: 25px auto; }
            .title { color: blue; font-weight: bold; }
            .target { display: flex; height: 50px; }
            .target>span { flex-basis: 20%; }
            .target>span:nth-child(2n) { background-color: #dfdfdf; }
            .target>span:nth-child(2n+1) { background-color: #ffff00; }
            .target>.middle { line-height: 50px; text-align: center; font-size: 30px; }
        </style>
    </head>
    <body>
        <div class="target">
            <span>1</span>
            <span>2</span>
            <span class="middle" id="third" title="我是阿三">
                <b>3</b>
            </span>
            <span>4</span>
            <span>5</span>
        </div>
        <div class="wrapper">
            <p class="title">Node原型属性</p>
            <ul>
                <li>Node.prototype.getRootNode() 获得整个文档的根节点</li>
                <li>Node.prototype.nodeType 用于获取节点类型</li>
                <li>Node.prototype.nodeName 用于获取节点名称(对于元素来说就是标签名，对于属性来说就是属性名)</li>
                <li>Node.prototype.nodeValue 仅适用于属性节点，用于获取属性值</li>
                <li>Node.prototype.parentNode 获取当前节点的父节点</li>
                <li>Node.prototype.parentElement 获取当前节点的父元素</li>
                <li>Node.prototype.hasChildNodes() 判断当前节点是否有子节点</li>
                <li>Node.prototype.childNodes 获得当前节点的子节点(返回NodeList实例)</li>
                <li>Node.prototype.firstChild 获得当前节点内首个子节点</li>
                <li>Node.prototype.lastChild 获得当前节点内末尾子节点</li>
                <li>Node.prototype.previousSibling 获得当前节点前一个兄弟节点</li>
                <li>Node.prototype.nextSibling 获得当前节点后一个兄弟节点</li>
            </ul>
        </div>
        <div class="wrapper">
            <p class="title">Element原型属性</p>
            <ul>
                <li>Element.prototype.childElementCount 获取子元素个数</li>
                <li>Element.prototype.children 获取子元素(返回HTMLCollection实例)</li>
                <li>Element.prototype.firstElementChild 获取元素内部首个子元素</li>
                <li>Element.prototype.lastElementChild 获取元素内部末尾子元素</li>
                <li>Element.prototype.previousElementSibling 获取元素前一个兄弟元素</li>
                <li>Element.prototype.nextElementSibling 获取元素后一个兄弟元素</li>
                <li>Element.prototype.hasAttributes() 判断当前元素是否拥有属性</li>
                <li>Element.prototype.hasAttribute(name) 判断当前元素是否拥有指定名称的属性 </li>
                <li>Element.prototype.attributes 获取当前元素所有实行节点(返回NamedNodeMap实例)</li>
                <li>Element.prototype.getAttributeNames() 获取当前元素所有的属性名组成数组</li>
                <li>Element.prototype.getAttribute(name) 获取当前元素指定属性的属性值</li>
                <li>Element.prototype.getAttributeNode(name) 获取当前元素指定名称的属性(返回Attr实例) </li>
            </ul>
        </div>

        <div class="wrapper">
            <p class="title">Document的原型属性</p>
            <ul>
                <li>document 表示整个文档对应的节点(它是DOM编程的入口)</li>
                <li>Document.prototype.querySelector(selector) 选取匹配参数所指定选择器的首个元素(若不存在则返回null)</li>
                <li>Document.prototype.querySelectorAll(selector) 选取匹配参数所指定选择器的所有元素(若不存在则返回空的NodeList实例)</li>
            </ul>
        </div>

        <div class="wrapper">
            <p class="title">参考文档</p>
            <ul>
                <li>
                    <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType">节点类型</a>
                </li>
            </ul>
        </div>

        <script>
            console.log( document );
            console.log( 'document nodeType: ', document.nodeType );
            console.log( 'document nodeName: ', document.nodeName );
            console.log( 'document nodeValue: ', document.nodeValue );
            console.log( document instanceof Document ); // true
            console.log( document.getRootNode() === document ); // true

            // 选择匹配指定CSS选择器的首个元素(若不存在则返回null)
            const mid = document.querySelector( `.target>.middle` );
            console.log( '被选择的目标元素: ', mid);
            console.log( 'toString: ', mid.toString() ); // [object HTMLSpanElement]
            console.log( '\tnodeType: ', mid.nodeType );
            console.log( '\tnodeName: ', mid.nodeName );
            console.log( '\tnodeValue: ', mid.nodeValue );
            console.log( '\tparentNode: ', mid.parentNode );
            console.log( '\tparentElement: ', mid.parentElement );
            console.log( '\thasChildNodes(): ', mid.hasChildNodes() );
            console.log( '\tchildNodes: ', mid.childNodes );
            console.log( '\tfirstChild: ', mid.firstChild );
            console.log( '\tlastChild: ', mid.lastChild );
            console.log( '\tpreviousSibling: ', mid.previousSibling );
            console.log( '\tnextSibling: ', mid.nextSibling );

            console.log( '\t', '- '.repeat(10) );

            console.log( '\tchildElementCount: ',mid.childElementCount );
            console.log( '\tchildren: ',mid.children  );
            console.log( '\tfirstElementChild: ',mid.firstElementChild );
            console.log( '\tlastElementChild: ',mid.lastElementChild );
            console.log( '\tpreviousElementSibling: ',mid.previousElementSibling  );
            console.log( '\tnextElementSibling: ',mid.nextElementSibling  );

            console.log( '\t', '- '.repeat(10) );

            console.log( '\thasAttributes(): ', mid.hasAttributes() );
            console.log( '\thasAttribute("title"): ', mid.hasAttribute('title') );
            console.log( '\tattributes: ', mid.attributes );
            console.log( '\tgetAttributeNames(): ', mid.getAttributeNames() );
            console.log( '\tgetAttribute("title"): ', mid.getAttribute('title') );

            const attr = mid.getAttributeNode('title');
            console.log( '\tgetAttributeNode("title"): ', attr );
            console.log( '\tattribute nodeType: ', attr.nodeType );
            console.log( '\tattribute nodeName: ', attr.nodeName );
            console.log( '\tattribute nodeValue: ', attr.nodeValue );

            console.log( document.querySelectorAll( '*' ) );
        </script>
    </body>
</html>